<template>
  <div class="swiper">
    <mt-swipe :auto="3000" class="myswipe">
      <!-- v-for遍历，记得key属性，src必须使用v-bind绑定才是变量 -->
      <!-- 轮播图组件需要一个imglist变量，需要父组件传递 -->
      <mt-swipe-item v-for="item in imglist" :key="item.id">
        <!-- bug1:首页中轮播图图片路径是item.img  但商品详情页中轮播图路径是item.src
        解决方法：使用V-if判断渲染 v-if内容为true则渲染那个DOM元素-->
        <img v-if="item.img" :src="item.img" class="img">
        <img else :src="item.src" class="src">
        <!-- bug2：首页轮播图要求width为100%  商品详情页轮播图要求width自适应高 
        解决方法：定义两个类 或者麻烦点使用：class="{类名：flag}"-->
      </mt-swipe-item>
    </mt-swipe>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: ["imglist"]
};
</script>
<style lang="less" scoped>
.myswipe {
  height: 200px;
  text-align: center;
  .img {
    width: 100%;
    height: 100%;
  }
  .src {
    height: 100%;
  }
}
</style>